<template>
  <view>
    <!-- 时间 -->
    <view class="time" v-if="shoutime">{{ shoutime }}</view>
    <!-- 左边的聊天列表 -->
    <view class="ltiao" :style="isSelf ? 'flex-direction: row-reverse; ' : ''">
      <image
        :src="props.item.imgae"
        mode="scaleToFill"
        style="width: 80rpx; height: 80rpx"
        class="tupian"
        @tap="neir"
      />
      <view class="neir">
        <view style="max-width: 400rpx; min-width: 100rpx" :class="isSelf ? 'neiron1' : 'neiron'">
          {{
          item.content
          }}
        </view>
        <span class="neiron2" v-if="isFocus == false && isSelf && item.hondian == 'false'"></span>
      </view>

      <!-- <view class="time">{{ item.time }}</view> -->
    </view>
    <view
      v-if="isFocus == false && isSelf && item.hondian == 'false'"
      class="guanzhu"
    >对方没有和你互关,被对方拒收</view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { myStore, liaotStore } from '@/stores'
import { formatMessageDate, formatTime, getChatTime } from '@/composables/time'
import { getCurrentInstance } from 'vue'
import { getDetailAPI11 } from '@/services/liaotian'
const { proxy } = getCurrentInstance()
const user = myStore()
const liaotian = liaotStore()
// 写props
const props = defineProps<{
  item: object
  index: number
  pretime: number
  isFocus: boolean
}>()
// 实现消息传输 优化做法  写成小组件 这样for循环就可以快速传输，不然会一直遍历
let uid = 1
const isSelf = computed(() => {
  if (user.userinfo.username != props.item.name) props.item.uid = 2
  return uid === props.item.uid
})
console.log(isSelf.value)

// 计算时间差

// 时间差消息事件 v-if 判断
const shoutime = computed(() => {
  return getChatTime(props.item.time, props.pretime)
})
const neir = async () => {
  console.log(props.item, '我看看')
  let res = await getDetailAPI11(props.item)
  console.log(res, '获取到详情页的需要数据')
  uni.navigateTo({
    url: '../../../../pagesA/user-space/index?gerenail=' + JSON.stringify(res.data[0]),
  })
}
// 事件判断函数也可以判断时间
// const fason = (index) => {
//   console.log(index)

//   if (index > 0 && list1.value.list[index] && list1.value.list[index - 1]) {
//     shoutime.value = getChatTime(list1.value.list[index].time, list1.value.list[index - 1].time)
//   } else if (list1.value.list[index]) {
//     shoutime.value = getChatTime(list1.value.list[index].time, 0)
//   } else {
//     shoutime.value = '' // Or handle the scenario where list1.value.list[index] is undefined
//   }

//   return shoutime.value ? true : false
// }
</script>

<style scoped lang="scss">
// 内容
.ltiao {
  display: flex;
  align-content: start;

  padding: 20rpx;
  .tupian {
    // 变圆角
    border-radius: 100%;
  }
  // 左边聊天内容
  .neiron {
    height: 70%;
    text-align: center;
    font-size: 30rpx;
    color: #131212;
    margin: 40rpx;
    //  变椭圆形4个角

    border-radius: 10rpx 20rpx 30rpx 30rpx;
    background-color: #a8a5a5;
    padding: 20rpx;
  }
  // 右边聊天内容
  .neiron1 {
    height: 70%;
    text-align: center;
    font-size: 30rpx;
    color: #131212;
    margin: 40rpx;
    //  变椭圆形4个角

    border-radius: 20rpx 10rpx 30rpx 30rpx;
    background-color: #29d06c;
    padding: 20rpx;
  }
  .time {
    text-align: center;
    font-size: 15rpx;
    margin: 30rpx, 0rpx;
    color: #b4acac;
    // 垂直居中
    display: flex;
    align-items: center;
  }
}
.time {
  text-align: center;
  font-size: 20rpx;
  margin: 30rpx, 0rpx;
  color: #b4acac;
  // 垂直居中
  display: flex;
  justify-content: center;
  align-items: center;
}
.neir {
  position: relative;
  height: 50%;
  .neiron2 {
    // 写一个红感叹号

    width: 20rpx;
    height: 20rpx;
    border-radius: 100%;
    background-color: #ff0000;
    margin: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 40%;
    // 调整到父组件聊天框的左边
    left: -10rpx;
  }
}
.guanzhu {
  //写一个好看样式，提示对方没有和你互关
  width: 500rpx;
  text-align: center;
  font-size: 30rpx;
  color: #b4acac;
  // 垂直居中 再改改
  height: 50%;
  display: flex;
  margin-left: 100rpx;
  justify-content: center;
  align-items: center;
  //好看的拒收消息的背景颜色
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  background-color: #d5d0d0;
}
</style>
